<template>
  <a-carousel style="margin: 20px; border-radius: 20px;" autoplay>
    <div><img src="../assets/home/jiangxing.png" width="100%" height="100%"></div>
    <div><img src="../assets/home/dingzhi.png" width="100%" height="100%"></div>
    <div><img src="../assets/home/duobao.jpg" width="100%" height="100%"></div>
    <div><img src="../assets/home/zhibo.jpg" width="100%" height="100%"></div>
    <div><img src="../assets/home/baner.png" width="100%" height="100%"></div>
  </a-carousel>
  <!-- Three.js Canvas -->
  <canvas id="threeCanvas" v-if="windowWidth >= 1024"></canvas>
  <canvas id="threeCanvas" v-else style="opacity: 0;"></canvas>
  <div id="sort">
    <a href="/buy">
      <img src="../assets/home/sort1.png" style="border-radius: 10px;width: 25%">
    </a>
    <a href="/buy">
      <img src="../assets/home/sort2.png" style="border-radius: 10px;width: 25%">
    </a>
    <a href="/buy">
      <img src="../assets/home/sort3.png" style="border-radius: 10px;width: 25%">
    </a>
  </div>
  <!-- 为什么选择我们 -->
  <div style="margin: 10px;border-radius: 20px;" >
    <div v-if="windowWidth >= 720"
      style="text-align: center;padding: 20px 0; font-size: 25px; color: #333;background-color: #e6f4ff;border-radius: 20px 20px 0 0;">
      ✨为什么选择我们？
    </div>
    <div v-else
      style="text-align: center;padding:5px 0; font-size: 18px; color: #333;background-color: #e6f4ff;border-radius: 10px 10px 0 0;">
      ✨为什么选择我们？
    </div>
    <div class="cards-container">
      <div class="card-item">
        <a-card title="💡 创意定制" style="font-size: 10px;">
          我们平台提供创意定制服务，让您可以根据自己的需求和创意，从原料到设计到雕刻的深度定制的产品。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="🚀 火箭速度"  style="font-size: 10px;">
          与其他平台相比，我们提供更快的服务响应和更加高效的沟通模式。这意味着您可以更有效率地完成定制，节省宝贵时间。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="🔒 安全保障"  style="font-size: 10px;">
          在数据安全和隐私保护方面，我们平台拥有更加严格和先进的技术措施。您的信息将得到最大程度的保护。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="💰 价格透明" style="font-size: 10px;">
          我们平台上的所有商品都公开标价，确保您在购买之前可以充分了解商品价格和质量。并且设置信用分互评体系，杜绝欺诈行为。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="📈 数据分析" style="font-size: 10px;">
          我们平台会定期进行数据分析，以帮助您更好地了解商品需求和市场动态。同时，我们也会提供相应的数据报告，以便您做出更加明智的决策。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="📦 高效物流" style="font-size: 10px;">
          我们平台与多家物流公司合作，确保商品能够快速、安全地送达您的手中。同时也给给买卖双方的交易提供保障，降低不诚信的交易风险。
        </a-card>
      </div>
      <div class="card-item">
        <a-card title="💌 贴心服务" style="font-size: 10px;">
          我们平台提供贴心的售后服务以及保险服务，包括退换货、维修、保修、交易纠纷等。您的满意是我们最大的动力。
        </a-card>
      </div>
    </div>
  </div>
  <!-- 排行榜 -->
  <div style="margin: 10px;border-radius: 20px;">
    <div v-if="windowWidth >= 720"
    style="text-align: center;padding: 20px 0; font-size: 25px; color: #333;border-radius: 20px 20px 0 0;">
      🛍️热卖商品排行榜
    </div>
    <div v-else
      style="text-align: center;padding: 5px 0; font-size: 18px; color: #333;border-radius: 20px 20px 0 0;">
        🛍️热卖商品排行榜
      </div>
    <div class="cards-container" style="background-color: #fff;text-align: center;">
      <div class="card-item">
        <a-card style="background-color: #e6f4ff">
          <img src="../assets/home/NO1.png" style="margin-bottom: 10px;">
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品名称：{{ goods[0].name }}</p>
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品销量：{{ goods[0].sales }}🔥</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #e6f4ff">
          <img src="../assets/home/NO2.png" style="margin-bottom: 10px;">
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品名称：{{ goods[1].name }}</p>
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品销量：{{ goods[1].sales }}🔥</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #e6f4ff">
          <img src="../assets/home/NO3.png" style="margin-bottom: 10px;">
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品名称：{{ goods[2].name }}</p>
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品销量：{{ goods[2].sales }}🔥</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #e6f4ff">
          <img src="../assets/home/NO4.png" style="margin-bottom: 10px;">
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品名称：{{ goods[3].name }}</p>
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品销量：{{ goods[3].sales }}🔥</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #e6f4ff">
          <img src="../assets/home/NO5.png" style="margin-bottom: 10px;">
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品名称：{{ goods[4].name }}</p>
          <p style="color: #00a6ed;font-size: 12px;font-weight: bold;">商品销量：{{ goods[4].sales }}🔥</p>
        </a-card>
      </div>
    </div>
  </div>
  <div style="margin: 20px;border-radius: 20px;">
    <div v-if="windowWidth >= 720"
    style="text-align: center;padding: 20px 0; font-size: 25px; color: #333;border-radius: 20px 20px 0 0;">
      🏅热门店铺排行榜
    </div>
    <div v-else
      style="text-align: center;padding: 5px 0; font-size: 18px; color: #333;border-radius: 20px 20px 0 0;">
        🏅热门店铺排行榜
      </div>
    <div class="cards-container" style="background-color: #fff;text-align: center;">
      <div class="card-item">
        <a-card style="background-color: #fce9b0">
          <img src="../assets/home/NO1.png" style="margin-bottom: 10px;">
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺名称：{{ shops[0].name }}</p>
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺人气：{{ shops[0].sales }}💕</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #fce9b0">
          <img src="../assets/home/NO2.png" style="margin-bottom: 10px;">
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺名称：{{ shops[1].name }}</p>
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺人气：{{ shops[1].sales }}💕</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #fce9b0">
          <img src="../assets/home/NO3.png" style="margin-bottom: 10px;">
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺名称：{{ shops[2].name }}</p>
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺人气：{{ shops[2].sales }}💕</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #fce9b0">
          <img src="../assets/home/NO4.png" style="margin-bottom: 10px;">
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺名称：{{ shops[3].name }}</p>
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺人气：{{ shops[3].sales }}💕</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #fce9b0">
          <img src="../assets/home/NO5.png" style="margin-bottom: 10px;">
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺名称：{{ shops[4].name }}</p>
          <p style="color: #f16a1e;font-size: 12px;font-weight: bold;">店铺人气：{{ shops[4].sales }}💕</p>
        </a-card>
      </div>
    </div>
  </div>
  <div style="margin: 20px;border-radius: 20px;">
    <div v-if="windowWidth >= 720" style="text-align: center;padding: 20px 0; font-size: 30px; color: #333;border-radius: 20px 20px 0 0;">
      🎁热心用户排行榜
    </div>
    <div v-else style="text-align: center;padding: 5px 0; font-size: 18px; color: #333;border-radius: 20px 20px 0 0;">
      🎁热心用户排行榜
    </div>
    <div class="cards-container" style="background-color: #fff;text-align: center;">
      <div class="card-item">
        <a-card style="background-color: #ffcdcc">
          <img src="../assets/home/NO1.png" style="margin-bottom: 10px;">
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">用户名称：{{ users[0].name }}</p>
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">个人积分：{{ users[0].exp }}⚡</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #ffcdcc">
          <img src="../assets/home/NO2.png" style="margin-bottom: 10px;">
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">用户名称：{{ users[1].name }}</p>
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">个人积分：{{ users[1].exp }}⚡</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #ffcdcc">
          <img src="../assets/home/NO3.png" style="margin-bottom: 10px;">
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">用户名称：{{ users[2].name }}</p>
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">个人积分：{{ users[2].exp }}⚡</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #ffcdcc">
          <img src="../assets/home/NO4.png" style="margin-bottom: 10px;">
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">用户名称：{{ users[3].name }}</p>
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">个人积分：{{ users[3].exp }}⚡</p>
        </a-card>
      </div>
      <div class="card-item">
        <a-card style="background-color: #ffcdcc">
          <img src="../assets/home/NO5.png" style="margin-bottom: 10px;">
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">用户名称：{{ users[4].name }}</p>
          <p style="color: #f84d4d;font-size: 12px;font-weight: bold;">个人积分：{{ users[4].exp }}⚡</p>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { element } from 'three/examples/jsm/nodes/Nodes.js';

//3d模型
let scene, camera, renderer;
const windowWidth = ref(window.innerWidth);
onMounted(() => {
  window.addEventListener('resize', () => {
    windowWidth.value = window.innerWidth;
  });
  initThreeJS();
  loadModel();
});

function initThreeJS() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, 250 * (window.innerWidth / 1920) / 350 * (window.innerHeight / 800), 0.1, 1000);
  camera.position.z = 6;

  renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('threeCanvas') });
  renderer.setSize(250 * (window.innerWidth / 1920), 350 * (window.innerHeight / 800));
  renderer.setClearColor(0x000000, 0);

  const light = new THREE.HemisphereLight(0xffffff, 0xffffff);
  light.position.set(0, 0, 10);
  scene.add(light);

  const directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(0, 0, 10);
  scene.add(directionalLight);

  // 创建轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 启用阻尼效果，使旋转更加平滑
  controls.autoRotate = true; // 启用自动旋转
  controls.autoRotateSpeed = 0.5; // 设置自动旋转速度
  controls.enableZoom = true; // 启用缩放
  controls.minDistance = 1; // 设置相机最小距离
  controls.maxDistance = 100; // 设置相机最大距离

}

function loadModel() {
  const loader = new GLTFLoader();
  loader.load('jade.glb', (gltf) => {
    const model = gltf.scene;
    model.position.set(0, 0, 0);
    model.scale.set(8 * (window.innerWidth / 1920), 8 * (window.innerWidth / 1920), 8 * (window.innerWidth / 1920)); // 缩放模型到合适大小
    scene.add(model);
    animate();
  });
}

function animate() {
  requestAnimationFrame(animate);
  // 这里可以添加模型动画
  scene.children[2].rotation.y += 0.02;
  renderer.render(scene, camera);
}

//动效
onMounted(() => {
  const boxes = document.querySelectorAll('.card-item')
  window.addEventListener('scroll', checkBoxes)
  checkBoxes()
  function checkBoxes() {
    const triggerBottom = window.innerHeight / 5 * 4
    boxes.forEach(box => {
      const boxTop = box.getBoundingClientRect().top
      if (boxTop < triggerBottom) {
        box.classList.add('show')
      } else {
        box.classList.remove('show')
      }
    })
  }
});
//排行榜
const goods = ref([
  {
    key: '1',
    name: '商品A',
    sales: '12345',
  },
  {
    key: '2',
    name: '商品B',
    sales: '9876',
  },
  {
    key: '3',
    name: '商品C',
    sales: '8765',
  },
  {
    key: '4',
    name: '商品D',
    sales: '7654',
  },
  {
    key: '5',
    name: '商品E',
    sales: '6543',
  }
  // ...其他数据
]);
const shops = ref([
  {
    key: '1',
    name: '店铺A',
    sales: '12345',
  },
  {
    key: '2',
    name: '店铺B',
    sales: '9876',
  },
  {
    key: '3',
    name: '店铺C',
    sales: '8765',
  },
  {
    key: '4',
    name: '店铺D',
    sales: '7654',
  },
  {
    key: '5',
    name: '店铺E',
    sales: '6543',
  }
  // ...其他数据
]);
const users = ref([
  {
    key: '1',
    name: '用户A',
    exp: '12345',
  },
  {
    key: '2',
    name: '用户B',
    exp: '9876',
  },
  {
    key: '3',
    name: '用户C',
    exp: '8765',
  },
  {
    key: '4',
    name: '用户D',
    exp: '7654',
  },
  {
    key: '5',
    name: '用户E',
    exp: '6543',
  }
  // ...其他数据
]);
</script>


<style scoped>
body {
  overflow: scroll;
  overflow-x: hidden;
}

:deep(.slick-slide) {
  position: relative;
  text-align: center;
  width: 100%;
  height: 30%;
  border-radius: 10px;
  line-height: 30%;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}

#threeCanvas {
  position: absolute;
  bottom: 22%;
  right: 3%;
}

#sort {
  text-align: center;
}

#sort a {
  margin: 0.8% 1.6% 0.8% 1.6%;
}

.cards-container {
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: space-around;
  /* 或者使用 space-between */
  padding: 20px;
  background-color: #e6f4ff;
  border-radius: 0 0 20px 20px;
}

.card-item {
  flex: 1;/* 这将使卡片宽度自适应 */
  margin: 10px;/* 卡片之间的间距 */
  min-width: 160px;/* 设置卡片的最小宽度 */
  max-width: 200px;
  opacity: 0;/* 初始时隐藏卡片 */
}

@media (max-width: 720px){
  .cards-container {
    display: float;
    flex-wrap: wrap;
    /*justify-content: space-around;
     或者使用 space-between */
    padding: 0px;
    background-color: #e6f4ff;
    border-radius: 0 0 10px 10px;
  }
  .card-item {
    /*flex: 1; 这将使卡片宽度自适应 */
    margin: 5px;/* 卡片之间的间距 */
    min-width: 140px;/* 设置卡片的最小宽度 */
    max-width: 200px;
    font-size: 8px;
    max-width: 200px;
    opacity: 0;/* 初始时隐藏卡片 */
  }
  .ant-card .ant-card-body{
    padding: 5px;
  }
}

.card-item img {
  width: 90px;
  height: 100px;
}

.card-item.show {
  animation: flyIn 1s ease forwards;
  /* 应用动画，并保持最后一帧的状态 */
}

@keyframes flyIn {
  0% {
    transform: translateX(100px) scale(0.5);
    opacity: 0;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.card-item:nth-child(1) {
  animation-delay: 0s;
}

.card-item:nth-child(2) {
  animation-delay: 0.2s;
}

.card-item:nth-child(3) {
  animation-delay: 0.4s;
}

.card-item:nth-child(4) {
  animation-delay: 0.6s;
}

.card-item:nth-child(5) {
  animation-delay: 0.8s;
}

.card-item:nth-child(6) {
  animation-delay: 1s;
}

.card-item:nth-child(7) {
  animation-delay: 1.2s;
}
</style>